<template>
	<view>
		<view >
					<uni-section >
						<uni-card  >
							<uni-forms  :modelValue="form" :rules="rules" ref="valiForm">
								<uni-forms-item  required name="username">
									<uni-easyinput suffixIcon="person" v-model="form.username" placeholder="请输入注册账号" />
								</uni-forms-item>
								<uni-forms-item required name="password">
									<uni-easyinput type="password" v-model="form.password" placeholder="请输入密码"/>
								</uni-forms-item>
								<uni-forms-item>
								<button style="line-height:50rpx;height:50rpx;background-color:#ff8c29" @click="submit('valiForm')">注册</button>
								<view style="margin-left: 350rpx;">
									<navigator url="/pages/login/login" hover-class="navigator-hover">
									  <a type="default">已有账号，去登录！</a>
									</navigator>
								</view>
								</uni-forms-item>
								
							</uni-forms>
						</uni-card>
					</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					role:'USER'
				},
				rules: {
									username: {
										rules: [{
											required: true,
											errorMessage: '账号不能为空'
										}]
									},
									password: {
										rules: [{
											required: true,
											errorMessage: '密码不能为空'
										},
										{
														minLength: 3,
														maxLength: 7,
														errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
													}
										],
										
									}
								},
			}
		},
		methods: {
			register(){
				this.form.role = 'USER'
				this.$request.post('/register',this.form).then(res =>{
					if(res.code == 200){
						uni.showToast({
						  icon: 'success',
						  title: res.msg
						})
						this.form ={}
			
					}else{
						uni.showToast({
						  icon: 'error',
						  title: res.msg
						})
					}
				})
				
			},
			submit(ref) {
							this.$refs[ref].validate().then(res => {
								this.register()
							}).catch(err => {
								console.log('err', err);
							})
						},
		}
	}
</script>

<style>

</style>
